import React, { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import styles from './Angil.module.css'

export default function Angil() {
  const [isScrolled, setIsScrolled] = useState(false)
  const nav = useNavigate()

  const handleClickChatAi = () => {
    nav("/chatAi")
  }

  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = window.scrollY || window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
      setIsScrolled(scrollTop > 50)
    }

    // 立即检查一次
    handleScroll()

    // 同时绑定到window和document
    window.addEventListener('scroll', handleScroll, { passive: true })
    document.addEventListener('scroll', handleScroll, { passive: true })

    return () => {
      window.removeEventListener('scroll', handleScroll)
      document.removeEventListener('scroll', handleScroll)
    }
  }, [])

  return (
    <div className={styles.app}>

      {/* 顶部导航栏 */}
      <header className={`${styles.header} ${isScrolled ? styles.scrolled : ''}`}>
        <div className={styles['nav-container']}>
          <div className={styles['logo-section']}>
            <div className={styles.logo}>🎓 智绘师</div>
            <div className={styles.logo}>🧠 祖暅大模型</div>
          </div>
          <nav className={styles['nav-links']}>
            <a href="#">人才招聘</a>
            <a href="#">中文</a>
          </nav>
        </div>
      </header>

      {/* 主要内容区域 */}
      <main className={styles['main-content']}>
        {/* 首页区域 */}
        <section className={styles['hero-section']}>
          <div className={styles['hero-content']}>
            <h1 className={styles['hero-title']}>
              智绘师祖暅大模型（MathGPT）是好未来自主研发的，面向全球数学爱好者和科研机构，以解题和讲题算法为核心的大模型。
            </h1>
            <button className={styles['start-btn']} onClick={handleClickChatAi} >开始体验 &gt;&gt;</button>

            <div className={styles['hero-links']}>
              <a href="#" className={styles['hero-link']}>接入解题 &gt;&gt;</a>
              <a href="#" className={styles['hero-link']}>接入讲题 &gt;&gt;</a>
              <a href="#" className={styles['hero-link']}>接入批改 &gt;&gt;</a>
            </div>
          </div>
        </section>

        {/* 第一个区域 - TAL-SCQ5K介绍 */}
        <section className={styles['intro-section']}>
          <div className={styles['intro-content']}>
            <h1>此次开源的TAL-SCQ5K-CN 和 TAL-SCQ5K-EN</h1>
            <p>数据集(各3K训练集和2K测试集)，题目为单选形式，涉及小初高阶段数学内容，带有详细的解析步骤便于进行COT的训练。</p>

            <div className={styles.tags}>
              <span className={styles.tag}>🤗 huggingface/TAL-SCQ5K</span>
              <span className={styles.tag}>📁 github/TAL-SCQ5K</span>
            </div>

            {/* 数据表格 */}
            <div className={styles['data-table']}>
              <table>
                <thead>
                  <tr>
                    <th>数据集名称</th>
                    <th>训练集</th>
                    <th>测试集</th>
                    <th>总题数</th>
                    <th>语言</th>
                    <th>主要内容</th>
                    <th>主要特点</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>中文</td>
                    <td>TAL-SCQ5K-CN-Training</td>
                    <td>3000</td>
                    <td>2000</td>
                    <td>5000</td>
                    <td>2170</td>
                    <td>675</td>
                  </tr>
                  <tr>
                    <td></td>
                    <td>TAL-SCQ5K-CN-Testing</td>
                    <td>3000</td>
                    <td>674</td>
                    <td>5.34</td>
                    <td>3000</td>
                    <td>1181</td>
                  </tr>
                  <tr>
                    <td>英文</td>
                    <td>TAL-SCQ5K-EN-Training</td>
                    <td>3000</td>
                    <td>674</td>
                    <td>5.34</td>
                    <td>3000</td>
                    <td>1181</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </section>

        {/* 第二个区域 - MathGPT介绍 */}
        <section className={styles['mathgpt-section']}>
          <div className={styles['mathgpt-content']}>
            <h2>智绘师祖暅大模型（MathGPT）已经凝聚一批优秀且年轻的数学老师、算法科学家和工程师，我们正在全球范围内寻找志同道合、敢于攻坚克难、才华横溢的各类人才，包括且不限于数学攻客、算法科学家、infra专家、数据工程师等。</h2>
            <p>期待您的加入。</p>
            <a href="#" className={styles['join-btn']}>加入我们 →</a>
          </div>
        </section>

        {/* 底部区域 */}
        <section className={styles['bottom-section']}>
          <div className={styles['bottom-content']}>
            <div className={styles['quote-section']}>
              <p className={styles.quote}>聪明在于勤奋，天才在于积累。</p>
              <p className={styles.author}>——数学家 华罗庚</p>
            </div>
            <div className={styles.avatar}>
              <img src="../public/OIP.webp" alt="华罗庚" />
            </div>
          </div>

          <footer className={styles.footer}>
            <div className={styles['footer-logos']}>
              <span>🎓 智绘师</span>
              <span>🧠 祖暅大模型</span>
            </div>
            <div className={styles['footer-text']}>
              <p>Copyright © 2024 MathGPT 保定振涛旗下人工学院自主研发的数学大模型</p>
              <p>感谢支持，一起让数学变得更简单！</p>
            </div>
          </footer>
        </section>
      </main>
    </div>
  )
}
